<template>
  <!--修改角色-->
  <el-dialog
      title="添加角色"
      :visible.sync="isShowAddRole"
      width="40%"
      :before-close="onClose"
      :close-on-click-modal="false"

  >

    <el-form ref="elForm" :model="role" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="role.roleName" placeholder="请输入角色名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="描述信息" prop="remark">
        <el-input v-model="role.remark" type="textarea" placeholder="请输入描述信息"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="onClose">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog>


</template>

<script>
import {addRole} from "@/network/system/role";

export default {
  name: "amend",
  data() {
    return {
      role: {
        roleName: undefined,
        remark: undefined,
      },
      rules: {
        roleName: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入描述信息',
          trigger: 'blur'
        }],}
    }
  }, props: {
    isShowAddRole: {
      type: Boolean,
      default: false
    }
  },
  created() {

  }, methods: {
    /*关闭窗口*/
    onClose() {
      this.$refs['elForm'].resetFields()

      this.$emit('update:visible', false)
    },
    /*提交*/
    submit() {
      console.log("aa")

      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        addRole(this.role).then((res) => {
          console.log(res)
          if (res.code===200){
            this.$message({
              showClose: true,
              message: '添加角色 成功',
              type: 'success'
            });
            //更新角色列表
            this.$emit("updateRoleList")

          }else {
            this.$message({
              showClose: true,
              message: '添加角色失败',
              type: 'error'
            });
          }
        })


        this.onClose()
      })
    }
  }
}
</script>

<style scoped>

</style>